<template>
	<div>
		<el-card class="box-card line-margin">
			<div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="line-img">
							<img style="width: 100%;" :src="detailData.info.list_pic_url" />
						</div>
						<div class="line-img-2">
							*产品图片仅供参考，请依据详细说明和最终确认为主
						</div>
					</el-col>
					<el-col :span="16">
						<div class="line-img-3">
							<div class="line-title">
								{{detailData.info.name}}
							</div>
							<div class="line-b line-b-bg">
								<div class="line-b-b">
									<div><span>单&nbsp;价：</span><span class="line-yuan">￥{{detailData.info.retail_price}}</span></div>
									<div><s><span>市场价：￥{{detailData.info.market_price}}</span></s></div>
								</div>
							</div>
							<div class="line-b">
								<div class="line-b-b">
									<div><span >参&nbsp;&nbsp;数：</span><span>{{currentAttribute}}</span></div>
									<div><span>品&nbsp;&nbsp;牌：<el-button type="text" style="color: #008800;">{{currentBrand}}</el-button></span></div>
									<div class="line-count"><span>商品服务：本由<font style="color: red;">柏特工业品商城</font>提供售后服务</span></div>
								</div>
							</div>
							<div >
								<div class="line-count">
									<el-tag type="success">现&nbsp;&nbsp;货</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;购买量：&nbsp;<el-input-number v-model="num1"
									 id="n1" :min="1" :max="totalCount" size="small"></el-input-number>
								</div>
								<div class="line-count">
									<el-tag type="danger">期&nbsp;&nbsp;货</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;购买量：&nbsp;<el-input-number v-model="num2"
									 id="n2" :min="0" size="small"> </el-input-number>
								</div>
							</div>
							<div class="line-b" style="text-align: center;">
								<el-button type="success">加入购物车</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="box-card line-margin">
			<div slot="header" class="clearfix">
				<span>商品详情</span>
				<el-button style="float: right; padding: 3px 0" type="text">更多相关>></el-button>
			</div>
			<div>
				<el-card>
					<div>
						{{detailData.info.goods_brief}}
					</div>
				</el-card>
				<el-card style="margin-top: 5px;    text-align: center;">
					<div v-html="detailData.info.goods_desc">
					</div>
				</el-card>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				detailData: {info:{},attribute:{},brand:{},comment:{},productList:{}},
				proId: '',
				num1: 1,
				num2: 0
			};
		},
		computed:{
			totalCount:function(){
				if (this.detailData.productList) {
					let icount =0
					for (var i = 0; i < this.detailData.productList.length; i++) {
						if (this.detailData.productList[i].goods_number) {
							icount+= parseInt(this.detailData.productList[i].goods_number);
						}
					}
					return icount;
				} else{
					return 0;
				}
			},
			currentBrand:function(){
				if (this.detailData.brand) {
					this.detailData.brand.name
				} else{
					return "";
				}
			},
			currentAttribute:function(){
				if (this.detailData.attribute) {
					let names =""
					for (var i = 0; i < this.detailData.attribute.length; i++) {
						if (this.detailData.attribute[i].name) {
							names+= this.detailData.attribute[i].name+":"+this.detailData.attribute[i].value+";       ";
						}
					}
					return names;
				} else{
					return "";
				}
			}
		},
		mounted: function() {
			window.scroll(0,0)
			this.proId = this.$route.query.id;
			this.initProduct(this.proId);
		},
		methods: {
			initProduct(proId) {
				let _this = this;
				var params = new URLSearchParams();
				params.append('id', proId);
				_this.$axios.post(_this.$api.GoodsDetailForNoUser, params).then(function(response) {
						_this.detailData = response.data.data
						console.log(response)
					})
					.catch(function(error) {
						console.log(error)
					});
			}
		}
	}
</script>

<style>
	#n1 .el-input-number__decrease,
	#n1 .el-input-number__increase,
	#n2 .el-input-number__decrease,
	#n2 .el-input-number__increase {
		top: 3px;
	}

	#n1 .el-input-number--small,
	#n2 .el-input-number--small {
		line-height: 27px;
	}

	.line-margin {
		margin-top: 15px;
	}

	.line-title {
		font-weight: bold;
		font-size: 18px;
		color: #000000;
		margin-top: 5px;
		margin-bottom: 10px;
	}

	.line-img {
		padding: 15px 5px;
		border: #f2f2f2 1px solid;
		height:380px;
	}

	.line-img-2 {
		color: #999999;
		font-size: 14px;
		padding-left: 5px;
	}

	.line-img-3 {
		color: #999999;
		font-size: 12px;
	}


	.line-b {
		padding: 10px 15px;
	}

	.line-b-bg {
		background-color: #f2f2f2;
	}

	.line-yuan {
		color: red;
		font-size: 16px;
		font-weight: bold;
	}


	.line-b-b div {
		margin-top: 10px;
	}

	.line-b-b::first {
		margin-top: 5px;
	}


	.line-count {
		margin-top: 2px;
		padding-bottom: 5px;
		border-bottom: #ECECEC 1px solid;
	}
</style>
